<template>
	<div class="login-wrap">
		<el-form class="login-container">
			<h1 class="title">用户登录</h1>
			<el-form-item label="">
				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
			</el-form-item>
			<el-row style="text-align: center;margin-top:-10px">
				<el-link type="primary">忘记密码</el-link>
				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
			</el-row>
		</el-form>
	</div>
</template>
 
<script>
import axios from 'axios'     
export default {
  name: 'Login',
  data () {
    return {
      username:"",
      password:""
    }
  },
  methods:{
	  gotoRegister(){
		 this.$router.push('/Register'); 
	  },
	 
	   doSubmit(){
        let url="http://localhost:8080/user/userLogin";
        let params={
          username:this.username,
          password:this.password
        }
        console.log(params);
        //前端发送ajax的方式
         axios.get(url, {
          params: params
        }).then(r=> {
          console.log(r);
		   console.log(r.data);
          if (r.data.success) {
            this.$message({
              message: r.data.msg,
              type: 'success'
            });
          } else {
            this.$message.error(r.data.msg);
          }
 
        }).catch(r=> {
          //如果有问题就会走这里
          // console.log(error);
        });
        
      }
  }
}
</script>
 
<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}
 
	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}
 
	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>